<template>
  <div class="feedback-container">
    <!-- 查询表单 -->
    <el-card shadow="never" class="search-card">
      <el-form :inline="true" :model="selectByForm" class="advanced-form">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" :lg="12" :xl="12">
            <el-form-item label="反馈人" class="form-item">
              <el-input
                  v-model="selectByForm.realName"
                  placeholder="请输入反馈人的姓名"
                  clearable
                  prefix-icon="el-icon-user"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="8" :lg="12" :xl="12">
            <el-form-item label="处理状态" class="form-item">
              <el-select
                  v-model="selectByForm.status"
                  placeholder="请选择处理状态"
                  clearable
                  style="width: 100%"
              >
                <el-option label="未处理" value="pending" />
                <el-option label="处理中" value="processing" />
                <el-option label="已完成" value="resolved" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24" class="form-actions">
            <el-button
                type="primary"
                @click="onSelect"
                icon="el-icon-search"
                class="search-btn"
            >
              查询
            </el-button>
            <el-button
                @click="resetForm"
                icon="el-icon-refresh"
                class="reset-btn"
            >
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 数据表格 -->
    <el-card shadow="never" class="table-card">
      <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
          fontWeight: 'bold'
        }"
          stripe
          highlight-current-row
          @row-click="handleRowClick"
      >
        <el-table-column
            prop="realName"
            label="反馈者"
            width="180"
            align="center"
        ></el-table-column>
        <el-table-column
            prop="content"
            label="反馈内容"
            width="360"
            align="center"
            show-overflow-tooltip
        ></el-table-column>
        <el-table-column
            prop="status"
            label="处理状态"
            width="180"
            align="center"
        >
          <template slot-scope="scope">
            <el-tag
                :type="statusTagType[scope.row.status]"
                effect="light"
            >
              {{ statusMap[scope.row.status] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="response"
            label="回应内容"
            width="360"
            align="center"
            show-overflow-tooltip
        ></el-table-column>
        <el-table-column
            prop="submitTime"
            label="提交时间"
            width="180"
            align="center"
        >
          <template slot-scope="scope">
            {{ formatDate(scope.row.submitTime) }}
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
            background
            :page-size="pageSize"
            :current-page="pageNum"
            :page-count="pages"
            layout="prev, pager, next, jumper, total"
            :total="total"
            @current-change="changePageNum"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- 回应弹窗 -->
    <el-dialog
        title="处理反馈"
        :visible.sync="showDialog"
        width="600px"
        :close-on-click-modal="false"
    >
      <el-form :model="form" label-width="100px">
        <el-form-item label="反馈内容">
          <el-input
              v-model="form.content"
              type="textarea"
              :rows="3"
              readonly
          ></el-input>
        </el-form-item>

        <el-form-item label="处理状态" prop="status">
          <el-select
              v-model="form.status"
              placeholder="请选择处理状态"
              style="width: 100%"
          >
            <el-option label="未处理" value="pending" />
            <el-option label="处理中" value="processing" />
            <el-option label="已完成" value="resolved" />
          </el-select>
        </el-form-item>

        <el-form-item label="回应内容" prop="response">
          <el-input
              v-model="form.response"
              type="textarea"
              :rows="4"
              placeholder="请输入回应内容"
              maxlength="500"
              show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button
            type="primary"
            @click="submitResponse"
            :loading="submitting"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getFeedbackPage, updateFeedback } from "@/api/feedback";

export default {
  data() {
    return {
      // 状态映射
      statusMap: {
        pending: '未处理',
        processing: '处理中',
        resolved: '已解决'
      },
      // 状态标签类型
      statusTagType: {
        pending: 'warning',
        processing: 'primary',
        resolved: 'success'
      },
      // 筛选表单
      selectByForm: {
        realName: '',
        status: ''
      },
      // 列表数据
      tableData: [],
      // 分页
      pages: 0,
      total: 1,
      pageNum: 1,
      pageSize: 6,
      // 弹窗
      showDialog: false,
      form: {
        feedbackId: '',
        userId:'',
        content: '',
        status: '',
        response: ''
      },
      submitting: false
    };
  },
  methods: {
    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return '-';
      return dateStr.split('T')[0];
    },

    // 点击行处理
    handleRowClick(row) {
      this.form = {
        feedbackId: row.feedbackId,
        content: row.content,
        status: row.status,
        userId: row.userId,
        response: row.response || ''
      };
      this.showDialog = true;
    },

    // 重置表单
    resetForm() {
      this.selectByForm = {
        realName: '',
        status: ''
      };
      this.pageNum = 1;
      this.getPage();
    },

    // 查询
    onSelect() {
      this.pageNum = 1;
      this.getPage();
    },

    // 获取页面数据
    getPage() {
      getFeedbackPage(this.selectByForm, this.pageNum, this.pageSize)
          .then((res) => {
            if (res.code == 200) {
              this.tableData = res.data.list;
              this.pages = res.data.pages;
              this.total = res.data.total;
              this.pageNum = res.data.pageNum;
              this.pageSize = res.data.pageSize;
            }
          });
    },

    // 分页变化
    changePageNum(v) {
      this.pageNum = v;
      this.getPage();
    },

    // 提交回应
    submitResponse() {
      if (!this.form.response) {
        this.$message.warning('请填写回应内容');
        return;
      }

      this.submitting = true;
      updateFeedback(this.form)
          .then(res => {
            if (res.code === 200) {
              this.$message.success('处理成功');
              this.showDialog = false;
              this.getPage();
            }
          })
          .finally(() => {
            this.submitting = false;
          });
    }
  },
  created() {
    this.getPage();
  }
}
</script>

<style scoped>
.feedback-container {
  padding: 20px;
}

/* 搜索卡片样式 */
.search-card {
  margin-bottom: 20px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
}

/* 表格卡片样式 */
.table-card {
  border-radius: 4px;
  border: 1px solid #ebeef5;
}

/* 表单行样式 */
.form-row {
  margin-bottom: 15px;
}

/* 表单项样式 */
.form-item {
  margin-bottom: 0;
}

/* 操作按钮区域 */
.form-actions {
  text-align: right;
  padding-top: 10px;
  margin-top: 10px;
}

/* 搜索按钮样式 */
.search-btn {
  padding: 10px 20px;
}

/* 重置按钮样式 */
.reset-btn {
  padding: 10px 20px;
  margin-left: 10px;
}

/* 分页容器样式 */
.pagination-container {
  margin-top: 20px;
  text-align: center;
}

/* 表格悬停效果 */
.el-table >>> .el-table__row {
  cursor: pointer;
}

.el-table >>> .el-table__row:hover {
  background-color: #f5f7fa !important;
}

/* 弹窗表单样式 */
.el-form-item {
  margin-bottom: 20px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .form-col {
    margin-bottom: 15px;
  }

  .form-actions {
    text-align: center;
  }

  .search-btn,
  .reset-btn {
    width: 100%;
    margin-left: 0;
    margin-bottom: 10px;
  }
}
</style>